<template>
	<view class="content">
		<title-nav :titleType="false">
			<view class="search-s" slot="home">
				<input class="search-s__input"/>
				<view class="search-s__icon">
					<i class="icon">&#xe648;</i>
				</view>
			</view>
		</title-nav>
		<view class="search-title">
			<text class="size28 iconColor">为你搜索到10张</text>
			<view class="search-title__icon" @tap="typeTap">
				<i class="size42 icon iconColor" v-if="typeS == 1">&#xe61b;</i>
				<i class="size42 icon iconColor" v-else>&#xe615;</i>
			</view>
		</view>
		<view class="search-content">
			<block v-if="typeS == 1">
				<block v-for="(item,index) in 3">
					<view class="search-content__list">
						
					</view>
				</block>
			</block>
			<block v-else>
				<block v-for="(item,index) in 3">
					<view class="search-content__line">
						<image mode="widthFix" class="search-content__img"></image>
						<view class="search-content__title">
							<text class="size28 textColor textck">血色</text>
							<text class="size28 textColor textck">dasdsada dasdsa</text>
							<view class="search-content__i">
								<text class="search-content__io"></text>
							</view>
							<text class="size26 iconColor textck">法术</text>
						</view>
					</view>
				</block>
			</block>
		</view>
	</view>
</template>

<script>
	import titleNav from '@/components/status-nav/w-titleBar.vue';
	export default {
		components:{
			titleNav
		},
		data() {
			return {
				title: 'H5+小程序示例模版',
				typeS:1
			}
		},
		onLoad() {
			
		},
		methods: {
			typeTap(){
				this.typeS = this.typeS == 1 ? 2 : 1;
			}
		}
	}
</script>

<style lang="less">
	.search-s{
		width: 100%;
		padding:0 30upx;
		background-color:#Ececec;
		height: 100%;
		border-radius: 32upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&__input{
			width:70%;
			text-align: left;
			height:100%;
		}
		&__icon{
			width: 30%;
			height:100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.search-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:30upx 24upx;
		border-bottom:2upx solid #e1e1e1;
		box-sizing: border-box;
		&__icon{
			width:60upx;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.search-content{
		padding:15upx 24upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		&__list{
			width:48%;
			height:300upx;
			background-color: #f9f9f9;
			border-radius: 10upx;
			margin-bottom:20upx;
		}
		&__line{
			width: 100%;
			padding:30upx 0;
			border-bottom: 2upx solid #e1e1e1;
			box-sizing: border-box;
			display: flex;
			align-items: flex-start;
		}
		&__img{
			width:150upx;
			height:200upx;
			background-color:#f9f9f9;
			margin-right:40upx;
			border-radius: 10upx;
		}
		&__i{
			display: flex;
			align-items: center;
			margin:20upx 0;
		}
		&__io{
			display: block;
			width: 30upx;
			height: 30upx;
			border-radius: 100%;
			background-color: #bbbbbb;
			margin-right:15upx;
		}
	}
</style>
